<template>
  <div class="store">
    <h3><span>店铺管理</span> <el-button type="primary">保存</el-button></h3>
    <hr />

    <label>
      <span>店铺名称</span>
      <el-input
        v-model="storename"
        placeholder="请输入内容"
        style="width: 300px"
      >
      </el-input>
    </label>

    <label>
      <span>店铺公告</span>
      <el-input
        type="textarea"
        v-model="bulletin"
        style="width: 300px"
      ></el-input>
    </label>
    <label>
      <span>店铺头像</span> <img src="../../assets/imgs/head.jpg" />
    </label>
    <div class="storeimg">
      <span>店铺图片</span>
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :file-list="fileList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>
    <label>
      <span>配送费</span>
      <el-input placeholder="请输入内容" v-model="freight" clearable>
      </el-input>
    </label>
    <label>
      <span>配送时间</span>
      <el-input placeholder="请输入内容" v-model="ordertime" clearable>
      </el-input>
    </label>
    <label>
      <span>配送描述</span>
      <el-input placeholder="请输入内容" v-model="orderinfo" clearable>
      </el-input>
    </label>
    <label>
      <span>店铺评分</span>
      <el-input placeholder="请输入内容" v-model="storegrade" clearable>
      </el-input>
    </label>
    <label>
      <span>销量</span>
      <el-input placeholder="请输入内容" v-model="salesnum" clearable>
      </el-input>
    </label>
    <label>
      <span>添加活动</span>
      <el-input placeholder="请输入内容" v-model="active" clearable> </el-input>
      <el-button type="primary" style="margin-left: 20px">添加活动</el-button>
    </label>
    <div class="anybtn">
      <span>活动</span>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="禁用"></el-checkbox>
        <el-checkbox label="选中且禁用"></el-checkbox>
      </el-checkbox-group>
    </div>

    <label>
      <span>营业时间</span>
      <el-time-picker
        is-range
        arrow-control
        v-model="runningtime"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      storename: "",
      bulletin: "",
      freight: "",
      ordertime: "",
      orderinfo: "",
      storegrade: "",
      salesnum: "",
      active: "",
      checkList: [],
      runningtime: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    };
  },
  // methods() {},
};
</script>

<style lang="less" scoped>
.store {
  background: #fff;
  height: 100%;
  h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }
  .storeimg {
    display: flex;
    align-items: flex-start;
    margin: 20px;
    span {
      width: 100px;
    }
  }
  label {
    display: flex;
    align-items: center;
    margin: 20px;
    img {
      width: 200px;
      height: 200px;
    }
    span {
      width: 100px;
    }
    .el-input {
      width: 300px;
    }
  }
}
.anybtn {
  display: flex;
  margin: 20px;
  span {
    width: 100px;
  }
}
</style>